<template>
  <div class="container" ref="container">
    <div class="a">
      <pie-chart></pie-chart>
    </div>
    <div class="b">
      <graph-chart></graph-chart>
    </div>
    <div class="c">
      <pie-chart></pie-chart>
    </div>
    <div class="d">
      <pie-chart></pie-chart>
    </div>
    <div class="e">
      <pie-chart></pie-chart>
    </div>
    <div class="f">
      <pie-chart></pie-chart>
    </div>
    <div class="g">
      <punel-chart></punel-chart>
    </div>
    <div class="h">
      <punel-chart></punel-chart>
    </div>
    <div class="i">
      <punel-chart></punel-chart>
    </div>
    <div class="j">
      <punel-chart></punel-chart>
    </div>
    <div class="k">
      <punel-chart></punel-chart>
    </div>
  </div>
</template>

<script setup>
import PieChart from "../components/PieChart.vue";
import GraphChart from "../components/GraphChart.vue";
import PunelChart from "../components/PunelChart.vue";
</script>

<style scoped lang="less">
.container {
  transform-origin: 0 0;
  overflow: hidden;
  height: 100%;
  background-color: rgb(5, 13, 35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);

  .a {
    grid-column: 1;
    grid-row: 1;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .b {
    .px2vw(width, 1920 / 4 * 2);
    .px2vh(height, 1080 / 4 * 3);
    grid-column: 2 / 4;
    grid-row: 1 / 4;
  }

  .c {
    grid-column: 4;
    grid-row: 1;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .d {
    grid-row: 2;
    grid-column: 1;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .e {
    grid-column: 4;
    grid-row: 2;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .f {
    grid-row: 3;
    grid-column: 1;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .g {
    grid-column: 4;
    grid-row: 3;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .h {
    grid-column: 1;
    grid-row: 4;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .i {
    grid-column: 2;
    grid-row: 4;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .j {
    grid-column: 3;
    grid-row: 4;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }

  .k {
    grid-column: 4;
    grid-row: 4;
    .px2vw(width, 1920 / 4);
    .px2vh(height, 1080 / 4);
  }
}
</style>